<template>
  <!-- 会员中心模板2 -->
  <!-- TODO 大部分跳转路径都做了修改 -->
  <div>
    <!-- 定制 松鼠小屋  start -->
    <section class="u-id-s2-card"
             v-if="memberInfo.xiaowu_dz==1">
      <div class="u-id-s2-actions-title">
        我是您的松鼠小屋团长
        <i>购买、售后、取货，任何不懂的联系我</i>
      </div>
      <div class="card-item clearfix">
        <div class="card-img fl">
          <a href="javascript:;">
            <img :src="memberInfo.my_agent.headimgurl"
                 width="60"
                 height="60"
                 alt />
          </a>
        </div>
        <div class="card-text">
          <p>
            <i>微信昵称：</i>
            <span>{{memberInfo.my_agent.nickname}}</span>
          </p>
          <p>
            <i>微信号：</i>
            <span>{{memberInfo.my_agent.weixin_account}}</span>
          </p>
          <p>
            <i>手机号：</i>
            <span>{{memberInfo.my_agent.mobile}}</span>
          </p>
        </div>
      </div>
    </section>
    <!-- 定制 松鼠小屋  end -->
    <div class="u-id-s2-links clearfix style2">
      <div class="u-id-s2-links-title">
        <h3>我的订单</h3>
        <p @click="Jump('/order-lists')">查看全部</p>
      </div>
      <div class="link-list">
        <!-- 待付款 -->
        <div class="link"
            @click="Jump('/order-lists?type=2')">
          <i class="icon-links icon1_1"></i>
          <span class="title">{{memberInfo.ftitle_pending_pay}}</span>
          <span class="num"
                v-if="memberInfo.wait_total!=0">{{memberInfo.wait_total}}</span>
        </div>
        <!-- 已付款 -->
        <div class="link"
            @click="Jump('/order-lists?type=6')">
          <i class="icon-links icon1_2"></i>
          <span class="title">{{memberInfo.ftitle_has_pay}}</span>
          <span class="num"
                v-if="memberInfo.ispay_total!=0">{{memberInfo.ispay_total}}</span>
        </div>
        <!-- 已发货 -->
        <div class="link"
            @click="Jump('/order-lists?type=3')">
          <i class="icon-links icon1_5"></i>
          <span class="title">{{memberInfo.ftitle_has_shipped}}</span>
          <span class="num"
                v-if="memberInfo.send_total!=0">{{memberInfo.send_total}}</span>
        </div>
        <!-- 待评价 -->
        <div class="link"
            v-if="memberInfo.is_comment == 1"
            @click="Jump('commentList',{type:'evaluate'})">
          <i class="icon-links icon2_2"></i>
          <span class="title">{{memberInfo.ftitle_comment_list}}</span>
          <span class="num"
                v-if="memberInfo.wait_comment_list!=0">{{memberInfo.wait_comment_list}}</span>
        </div>
        <!-- 退换货 -->
        <div class="link"
            v-if="memberInfo.is_allow_exchange==1 && memberInfo.is_allow_return==1"
            @click="Jump('/order-lists?type=4')">
          <i class="icon-links icon1_3"></i>
          <span class="title">{{memberInfo.ftitle_return_goods}}</span>
          <span class="num"
                v-if="memberInfo.return_total!=0">{{memberInfo.return_total}}</span>
        </div>
        <!-- 换货 -->
        <div class="link"
            v-else-if="memberInfo.is_allow_exchange==1"
            @click="Jump('/order-lists?type=4')">
          <i class="icon-links icon1_3"></i>
          <span class="title">换货</span>
          <span class="num"
                v-if="memberInfo.return_total!=0">{{memberInfo.return_total}}</span>
        </div>
        <!-- 退货 -->
        <div class="link"
            v-else-if="memberInfo.is_allow_return==1"
            @click="Jump('/order-lists?type=4')">
          <i class="icon-links icon1_3"></i>
          <span class="title">退货</span>
          <span class="num"
                v-if="memberInfo.return_total!=0">{{memberInfo.return_total}}</span>
        </div>
        <!-- 已完成 -->
        <div class="link"
            v-else
            @click="Jump('/order-lists?type=7')">
          <i class="icon-links icon1_3"></i>
          <span class="title">已完成</span>
          <span class="num"
                v-if="memberInfo.fina_total!=0">{{memberInfo.fina_total}}</span>
        </div>
        <!-- 全部 -->
        <!-- <div class="link master"
            @click="Jump('/order-lists')">
          <i class="icon-links icon1_4"></i>
          <span class="title">{{memberInfo.ftitle_all_orders}}</span>
          <span class="num"
                v-if="memberInfo.all_total!=0">{{memberInfo.all_total}}</span>
        </div> -->

        <!-- <div class="link"
            @click="Jump('mycoupon')">
          <i class="icon-links icon2_1"></i>
          <span class="title">{{memberInfo.ftitle_coupon}}</span>
          <span class="title_detail">{{memberInfo.coupon_num}}张可用</span>
        </div>

        <div class="link"
            @click="Jump('collectionGoods')">
          <i class="icon-links icon2_4"></i>
          <span class="title">{{memberInfo.ftitle_collection}}</span>
          <span class="title_detail">{{memberInfo.collection_num}}</span>
        </div>
        <div class="link"
            @click="Jump('balanceTx')">
          <i class="icon-links icon2_3"></i>
          <span class="title">{{memberInfo.account_balance}}</span>
          <span class="title_detail">{{memberInfo.balance}}</span>
        </div> -->
      </div>
    </div>
    <section class="mainmodule">
      <!-- 普通会员 -->
      <div class="mianad mianad2"
           v-if="memberInfo.is_user_img == 1">
        <a @click="JumpUrl(memberInfo.user_img_link)">
          <img :src="memberInfo.user_img_ggt"
               alt
               v-if="memberInfo.user_img_ggt" />
        </a>
      </div>
      <!-- 慈善关爱金 开始 -->
      <div class="csjj" v-if="memberInfo.charity_compassion_dz == 1">
        <div class="div1">
          <img  src="https://img.wifenxiao.com/h5-wfx/images/基金.png" alt="">
        </div>
        <div class="div2">
          慈善关爱金：¥ {{memberInfo.charity_compassion_money}}
        </div>
      </div>
      <!-- 慈善关爱金 结束 -->
      <!-- TODO 小程序文字滚动 -->
      <div class="lunbo" id="lunbo" v-if="memberInfo.is_affiche==1">
        <p v-if="!modifyUserPop" id="lunbo-p" class="lunbo-p" :style="{color:'#'+ memberInfo.affiche_color, transform: 'translateX(-'+scrollLeft+'px)', marginLeft:  marginLeft + 'px'} ">
          <span v-for="(item,index) in memberInfo.affiche"
                :key="index">{{item}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </p>
      </div>

      <div class="style2-actions clearfix mgt10">
        <div class="style2-actions-title">我的服务</div>
        <div class="action"
             @click="Jump('orderAllLists')">
          <span class="icon-action icon0_1"></span>
          <span class="title">我的订单</span>
        </div>
        <!-- 汇付、通联开户 start -->
        <div class="action"
             v-if="memberInfo.is_opened"
             @click="showOpenCard(memberInfo.is_opened)">
          <span class="icon-action icon26_open"></span>
          <span class="title">点我开户</span>
        </div>
        <!-- 汇付、通联开户 end -->
        <!--    常俊海第一期定制 start    -->
        <div  v-if="memberInfo.cjh_dz"
             class="action"
             @click="Jump('memberBuyRecord')">
          <span class="icon-action icon2_16"></span>
          <span class="title">会员购买记录</span>
        </div>
        <!--    常俊海第一期定制 end    -->
        <div v-if="memberInfo.show_point"
             class="action"
             @click="Jump('point')">
          <span class="icon-action icon1_1"></span>
          <span class="title">{{memberInfo.ftitle_point}}</span>
        </div>
        <div v-if="memberInfo.show_virtual && memberInfo.is_virtual_currency"
             class="action"
             @click="Jump('virtualCurrency')">
          <span class="icon-action icon1_14"></span>
          <span class="title">{{memberInfo.virtual_currency_title}}</span>
        </div>
        <div v-if="memberInfo.show_recharge"
             class="action"
             @click="Jump('rechargeList')">
          <span class="icon-action icon1_3"></span>
          <span class="title">{{memberInfo.ftitle_recharge}}</span>
        </div>
        <!-- 定制 薇曼 start -->
        <div class="action"
             v-if="memberInfo.is_wm_dz"
             @click="handleLinkTo('balanceSend')">
          <span class="icon-action icon1_9"></span>
          <span class="title">余额赠送</span>
        </div>
        <!-- 定制 薇曼 end -->
        <!-- <div v-if="memberInfo.show_myOrder"
             class="action"
             @click="Jump('/order-lists?type=6')">
          <span class="icon-action icon1_5"></span>
          <span class="title">{{memberInfo.ftitle_has_pay}}</span>
        </div> -->
        <div v-if="memberInfo.has_duodian && memberInfo.is_show_collection_shop && memberInfo.show_collection_shop"
             class="action"
             @click="Jump('collectionShop')">
          <span class="icon-action icon1_16"></span>
          <span class="title">{{memberInfo.ftitle_collection_shop}}</span>
        </div>
        <div v-if="memberInfo.show_user_share_card"
             class="action"
             @click="getUserCard('userCard')">
          <span class="icon-action icon2_16"></span>
          <span class="title">我的名片</span>
        </div>
        <div v-if="memberInfo.is_member_card"
             class="action"
             @click="onVipCardJump('cardDetail')">
          <span class="icon-action icon7_1"></span>
          <span class="title">会员卡</span>
        </div>
        <div v-if="memberInfo.is_try"
             class="action"
             @click="Jump('tryList')">
          <span class="icon-action icon1_8"></span>
          <span class="title">试用活动</span>
        </div>
        <div v-if="memberInfo.show_modify"
             class="action"
             @click="Jump('changeUserData')">
          <span class="icon-action icon1_10"></span>
          <span class="title">{{memberInfo.ftitle_change_data}}</span>
        </div>
        <div v-if="memberInfo.show_address"
             class="action"
             @click="Jump('addressList')">
          <span class="icon-action icon1_11"></span>
          <span class="title">{{memberInfo.ftitle_address}}</span>
        </div>
        <div v-if="memberInfo.show_privilege"
             class="action"
             @click="Jump('memberBenefits')">
          <span class="icon-action icon1_12"></span>
          <span class="title">{{memberInfo.ftitle_rank}}</span>
        </div>
        <div v-if="memberInfo.show_interaction"
             class="action"
             @click="Jump('game-list')">
          <span class="icon-action icon1_13"></span>
          <span class="title">{{memberInfo.ftitle_game}}</span>
        </div>
        <div v-if="memberInfo.friend_count && memberInfo.show_myFriend"
             class="action"
             @click="Jump('myFriend')">
          <span class="icon-action icon2_7"></span>
          <span class="title">{{memberInfo.ftitle_friend}}</span>
        </div>
        <div v-if="memberInfo.show_auction"
             class="action"
             @click="Jump('myAuction')">
          <span class="icon-action icon1_15"></span>
          <span class="title">拍卖</span>
        </div>
        <!-- 我的服务 -->
        <div v-if="memberInfo.show_myService"
             class="action"
             @click="Jump('my-serve')">
          <span class="icon-action icon1_30"></span>
          <span class="title">{{memberInfo.ftitle_my_serve}}</span>
        </div>
        <!-- TODO 传播宝暂时隐藏 -->
        <!-- <a @click="JumpUrl(memberInfo.chuan_bo_bao_url)"
             v-if="memberInfo.open_chuan_bo_bao==1"
             class="action">
          <span class="icon-action icon1_17"></span>
          <span class="title">传播宝</span>
        </a> -->

        <!--Todo: 展示的判断未加-->
        <!-- TODO 跳转路径修改 -->
        <div
          v-if="memberInfo.show_dls_upgrade"
          @click="Jump('upgrade-lv')"
          class="action"
        >
          <span class="icon-action icon1_18"></span>
          <span class="title">会员升级</span>
        </div>

        <!-- <div
          to="{:U('Collect/lists/status/3')}"
          v-if="memberInfo.show_numerous"
          class="action"
          @click="Jump('')"
        >
          <span class="icon-action icon3_1"></span>
          <span class="title">我的众筹</span>
        </div> -->
        <a
          v-if="memberInfo.show_numerous"
          class="action"
          @click="JumpUrl(memberInfo.collect_url)"
        >
          <span class="icon-action icon3_1"></span>
          <span class="title">我的众筹</span>
        </a>

        <div class="action"
             v-if="memberInfo.show_micro_course==1"
             @click="Jump('myCourse')">
          <span class="icon-action icon1_19"></span>
          <span class="title">我的课程</span>
        </div>
        <!-- <router-link to="/User/crowdList" v-if="is_crowd" class="action">
					<span class="icon-action icon1_9"></span>
					<span class="title">夺宝活动</span>
        </router-link>-->

        <!-- 定制 小皇鱼 start -->
        <div class="action"
             v-if="memberInfo.is_dz_xhy"
             @click="handleLinkTo('serviceCode')">
             <!-- @click="JumpUrl('/User/serviceCode')"> -->
          <span class="icon-action icon2_12"></span>
          <span class="title">服务二维码</span>
        </div>
        <div class="action"
             v-if="memberInfo.is_dz_xhy"
             @click="handleLinkTo('uploadCode')">
             <!-- @click="JumpUrl('/User/uploadCode')"> -->
          <span class="icon-action icon_upload"></span>
          <span class="title">上传二维码</span>
        </div>
        <div class="action"
             v-if="memberInfo.is_dz_xhy"
             @click="handleLinkTo('growingFansList')">
             <!-- @click="JumpUrl('/User/growingFansList')"> -->
          <span class="icon-action icon2_17"></span>
          <span class="title">涨粉列表</span>
        </div>
        <!-- 定制 小皇鱼 end -->
        <div class="action"
             v-if="memberInfo.show_highLevel_center && memberInfo.superior_user_id"
             @click="Jump('userSupplier')">
          <span class="icon-action icon2_26"></span>
          <span class="title">{{memberInfo.user_supplier}}</span>
        </div>
        <!-- 定制 上海透缇 start -->
        <div class="action"
             v-if="memberInfo.is_ti_dz"
             @click="JumpUrl('/nextLevelMember')">
          <span class="icon-action icon3_2"></span>
          <span class="title">我的会员</span>
        </div>
        <!-- 定制 上海透缇 end -->
        <!-- 定制 乐拍拍 start -->
        <div  class="action"
              v-if="memberInfo.lpp_dz==1"
              @click="handleLinkTo('auctionReturn')">
            <span class="icon-action icon1_5"></span>
            <span class="title">拍卖返现</span>
        </div>
        <!-- 定制 乐拍拍 end -->
        <!-- 定制 净水器 start -->
        <div class="action"
             v-if="memberInfo.is_dz_waterCleaner"
             @click="handleLinkTo('waterCleaner')">
          <span class="icon-action icon2_28"></span>
          <span class="title">绑定净水器</span>
        </div>
        <!-- 定制 净水器 end -->
        <!-- 定制 股权信息 start -->
        <div class="action"
             v-if="memberInfo.is_JTJK_DZ"
             @click="handleLinkTo('stockRight')">
          <span class="icon-action icon2_17"></span>
          <span class="title">股权信息</span>
        </div>
        <!-- 定制 股权信息 end -->
        <!-- 定制 欧普 增加绑定入口 start -->
        <div class="action op_dz_binding"
              v-if="memberInfo.is_op_dz==1"
              @click="showVerifyMobilePop">
            <span class="icon-action icon2_28"></span>
            <span class="title">绑定手机号</span>
        </div>
        <!-- 定制 欧普 增加绑定入口 end -->
        <!-- 定制 现金积分 start -->
        <div v-if="memberInfo.dz_cash_point"
                class="action"
                @click="handleLinkTo('dzPoint')">
          <span class="icon-action icon16_1_zyjk"></span>
          <span class="title">{{memberInfo.dz_cash_point_name}}</span>
        </div>
        <!-- 定制 现金积分 end -->
        <!-- 定制 职乐通联二选一 start -->
        <div v-if="memberInfo.is_member_select"
             class="action"
             @click="selectMemberType()">
          <span class="icon-action icon17_1_fzxz"></span>
          <span class="title">修改分账</span>
        </div>
        <!-- 定制 职乐通联二选一 end -->

        <div v-if="memberInfo.showShareLink" class="action"
          @click="Jump('/shareSelect')">
          <span class="icon-action icon20_1_fx"></span>
          <span class="title">万能链接</span>
        </div>
        <div v-if="memberInfo.is_skin_detection_dz"
            class="action"
            @click="Jump('/aiTest')">
          <span class="icon-action icon21_1_ai"></span>
          <span class="title">面部AI检测</span>
        </div>
        <!-- 订单兑换有礼 -->
        <div
            v-if="memberInfo.is_order_convert"
            class="action"
            @click="handleLinkTo('convertSetting')">
          <span class="icon-action icon23_dhyl"></span>
          <span class="title">{{memberInfo.order_convert_name}}</span>
        </div>
        <div
            v-if="memberInfo.is_display_sharer"
            class="action"
            @click="handleLinkTo('bindShare')">
          <span class="icon-action icon24_sxy"></span>
          <span class="title">成为分享员</span>
        </div>
        <div
            v-if="isAgreement.register_agreement"
            class="action"
            @click="handleLinkTo('userAgreement')">
          <span class="icon-action icon25_yhxy"></span>
          <span class="title">用户协议</span>
        </div>
        <div
            v-if="isAgreement.privacy_agreement"
            class="action"
            @click="handleLinkTo('privacyAgreement')">
          <span class="icon-action icon25_ysxy"></span>
          <span class="title">隐私协议</span>
        </div>
        <!-- 自定义项 -->
        <div v-if="memberInfo.dataset && memberInfo.dataset.length>0"
             v-for="(item,index) in memberInfo.dataset"
             :key="index"
             class="action">
          <a @click="JumpUrl(item.link)">
            <span class="icon-action"
                  :style="{backgroundImage: 'url('+item.pic+')',backgroundSize:'cover'}"></span>
            <span class="title">{{item.showtitle}}</span>
          </a>
        </div>
      </div>
    </section>

    <!-- <input type="hidden" value="{$code}" id="check_code"> -->
    <!-- <section class="mlogin-but"
             v-if="memberInfo.is_wx!=1 && memberInfo.isAfb!=1">
      <a href="javascript:;"
         class="red-gra-btn"
         v-if="memberInfo.isAppIos"
         @click="loginOutChild">退出登录</a>
      <a href="javascript:;"
         class="red-gra-btn"
         v-else-if="!memberInfo.isAppIos && memberInfo.is_priview"
         @click="loginOutChild">退出登录</a>
      <a href="javascript:;"
         class="red-gra-btn"
         v-else-if="!memberInfo.isAppIos"
         @click="loginOutChild">退出登录</a>
    </section> -->
    <!-- <div style="display: none;">{$random_content}</div> -->
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
    <template v-if="memberInfo.user_cencal_status == 1">
      <div class="mengniu-status" v-if="memberInfo.user_cencal_time">注销时间：{{memberInfo.user_cencal_time}}</div>
    </template>
  </div>
</template>
<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils.js'
import { syncSaveInfo } from '@/api/user/member/memberApi'
import small from '@/smallapp/small'
export default Vue.extend({
  props: {
    memberInfo: {
      type: Object
    },
    modifyUserPop: {
      type: Boolean,
      default: false
    },
    isAgreement: {
      type: Object,
      default: {
        register_agreement: 0,
        privacy_agreement: 0
      }
    }
  },
  data() {
    return {
      avatar:'',
      nickname:'',
      scrollLeft: 0,
      timer: null,
      contentWidth: 0,
      wrapWidth: 0,
      marginLeft: 40,
    }
  },
  mounted() {
    this.handleScrollLeft()
  },
  methods: {
    handleScrollLeft() {
      if (this.memberInfo.is_affiche == 1){
        const title = this.memberInfo.affiche[0]
        this.wrapWidth = (title.length * 25) / 2
        document.querySelector('.lunbo-p').$$getBoundingClientRect().then((res) => {
          this.contentWidth = res.width - this.marginLeft
          this.marginLeft = res.width - this.marginLeft
        })
        if (!this.timer) {
          this.timer = setInterval(() => {
            if (this.contentWidth >= this.wrapWidth) {
              clearInterval(this.timer)
              this.marginLeft = 40
            } else if (this.scrollLeft < this.wrapWidth + this.contentWidth) {
              this.scrollLeft += 2
            } else {
              this.scrollLeft = 0
            }
          }, 30)
        }
      }

    },
    Jump(url, data) {
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return false
        }
      this.$JumpPath(this, url, data)
    },
    JumpUrl(url) {
       // TODO 小程序跳转
        openPage(url)
    },

    updateUserInfo(){
      syncSaveInfo({
        headimgurl:this.avatarUrl,
        nickname:this.nickName,
      }).then((res)=>{
        this.Jump('userCard')
      })
    },
    getUserCard(){
      this.Jump('userCard')
    },

    handleLinkTo(url, data) {
      this.$JumpName(this, url, data)
    },
    onVipCardJump(path) {
      // this.Jump('cardList')
      this.memberInfo.is_show_buy_card ? this.Jump('cardList') : this.Jump(path)
    },
    loginOutChild() {
      this.$emit('loginOut')
    },
    // 欧普定制增加绑定手机号
    showVerifyMobilePop() {
      this.$Bus.$emit('showVerifyMobilePop', { show: true })
    },
    // 定制 职乐-通联分账修改
    selectMemberType() {
      this.$emit('selectMemberType')
    },
    // 点我开户
    showOpenCard(type) {
      if (type == 1) {
        this.handleLinkTo('openingSeparateAccount', { type: 1, company: this.memberInfo.tlfz_info.tlfz_company_open_account, person: this.memberInfo.tlfz_info.tlfz_person_open_account})
      } else if (type == 2) {
        this.showBalancePopApapay()
      }
    },
    // 汇付开户
    showBalancePopApapay() {
      const adapay_info = this.memberInfo.adapay_info
      // console.log('adapay_info', adapay_info.adapay_company_apply_status)

      if (adapay_info.adapay_company_apply_status == 0) {
        this.$Error(adapay_info.adapay_fail)
      } else if (adapay_info.adapay_company_apply_status == 2) {
        this.handleLinkTo('openingSeparateAccount', { hfActive: 5, hfType: 2, type: 2 })
      } else {
        if (adapay_info.step == 0) {
          if (adapay_info.adapay_company_apply_status == 2) {
            this.$Error(adapay_info.adapay_fail)
          }
          this.handleLinkTo('openingSeparateAccount', { hfActive: 0, type: 2 })
        } else if (adapay_info.step == 1) {
          this.handleLinkTo('openingSeparateAccount', { hfActive: 2, hfType: 1, type: 2 })
        }
      }
    }
  },
  updated() {
    // // console.log(this.memberInfo)
  }
})
</script>
<style lang="scss">
@import "../../../../../styles/user/index.scss";
@import "../../../../../styles/user/member/index";
.miniprogram-root {
  .mainmodule {
    .lunbo {
      position: relative;
      width: calc(100% - 40px);
      height: 48px;
      background: #f1f1f1;
      overflow: hidden;
      box-sizing: border-box!important;
      .lunbo-p {
        width: 100%;
        /*width: max-content;*/
        line-height: 48px;
        display: inline-block;
        white-space: nowrap;
        color: rgb(142, 107, 255);
        /*animation: 10s wordsLoop linear infinite normal;*/
      }
      @keyframes wordsLoop {
          0% {
              transform: translateX(100%);
              -webkit-transform: translateX(100%);
          }
          100% {
              transform: translateX(-100%);
              -webkit-transform: translateX(-100%);
          }
      }
      @-webkit-keyframes wordsLoop {
          0% {
              transform: translateX(100%);
              -webkit-transform: translateX(100%);
          }
          100% {
              transform: translateX(-100%);
              -webkit-transform: translateX(-100%);
          }
      }
    }
  }
}
.csjj {
  width: 90%;
  margin-left: 5%;
  background-color: #FFFAE5;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  .div1 {
    width: 15%;
  }
  .div2 {
    font-size: 32px;
    font-weight: bolder;
    color: #f12121;
  }
  img {
    width: 88px;height: 88px;
  }
}
</style>
